import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './login.module.css';
import { message } from 'antd';
import axios from 'axios';
import logo1 from './avatars/logo1.png'
import logo2 from './avatars/logo2.png'
import wechat from './avatars/wechat.png'

export default function Login() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });
  const [rememberMe, setRememberMe] = useState(false);
  const navigate = useNavigate();

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 这里添加登录逻辑
    // console.log('登录信息：', formData);
    let res = await axios.post('http://localhost:3000/loginemail', formData);
    if (res.data.code === 200) {
      // 登录成功后，将用户信息存储到本地存储中
      localStorage.setItem('user', JSON.stringify(res.data.data));
      message.success('登录成功');
      // 登录成功后跳转到首页
      navigate('/home');
    } else {
      message.error('登录失败，请检查账号密码和网络！');
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.leftSection}>
        <div className={styles.logo}>
          <img src={logo1} alt="Koto" />
          <h1>Koto</h1>
        </div>
        <h2>以最佳的方式管理您的文件存储</h2>
        <p>太棒了，我们为您创建了存储所有文档的完美场所。</p>
        <div className={styles.illustration}>
          <img src={logo2} alt="文件夹插图" />
        </div>
      </div>

      <div className={styles.rightSection}>
        <div className={styles.loginForm}>
          <h2>登录</h2>
          <form onSubmit={handleSubmit}>
            <div className={styles.inputGroup}>
              <label>用户名</label>
              <input
                type="text"
                name="username"
                placeholder="输入您的用户名"
                value={formData.username}
                onChange={handleInputChange}
              />
            </div>

            <div className={styles.inputGroup}>
              <label>电子邮件</label>
              <input
                type="email"
                name="email"
                placeholder="输入您的电子邮件"
                value={formData.email}
                onChange={handleInputChange}
              />
            </div>

            <div className={styles.inputGroup}>
              <label>密码</label>
              <input
                type="password"
                name="password"
                placeholder="输入密码"
                value={formData.password}
                onChange={handleInputChange}
              />
            </div>

            <div className={styles.rememberForgot}>
              <label>
                <input
                  type="checkbox"
                  checked={rememberMe}
                  onChange={(e) => setRememberMe(e.target.checked)}
                />
                记住我
              </label>
              <a href='/forgetpassword' >忘记密码？</a>
            </div>

            <button type="submit" className={styles.loginButton}>
              登录
            </button>
          </form>

          <div className={styles.divider}>
            <span>或</span>
          </div>

          <div className={styles.socialLogin}>
            <button className={styles.wechatButton}>
              <img src={wechat} alt="微信" />
            </button>
          </div>

          <div className={styles.register}>
            <span>还没有账户？</span>
            <a href="/register">立即注册</a>
          </div>
        </div>
      </div>
    </div>
  );
}
